<template>
	<view class="conent">
		<view class="conent_box">
			<u-list v-if="monitorsList.length>0">
				<u-list-item v-for="(item,index) in monitorsList" :key="index">
					<view class="item">
						<u--text :text="item.monitorName" align="left" size="18" bold lineHeight="40" color="#000"></u--text>
						<ezplayer id="ezplayer" :accessToken="accessToken"
							:url="'rtmp://open.ys7.com/'+item.monitorserialNo+'/'+item.monitorChannelNo+'/live'"
							bind:handleError="handleError" />
					</view>
				</u-list-item>
			</u-list>
			<u-empty v-else mode="list" icon="list"></u-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import router from '@/api/router';
	import {
		monitors
	} from "@/api/pages/hive.js"
	const monitorsList = ref([])
	const accessToken = ref("")
	onMounted(() => {
		getMonitors()
	})
	const getMonitors = async () => {
		const res = await monitors()
		accessToken.value = res.result.monitorAccessToken
		monitorsList.value = res.result.monitors
		console.log("res---", res);
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 0;
		background: #fff;

		.item {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
		}
	}
</style>